<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
  String basePath = request.getContextPath();
  Object email = request.getSession().getAttribute("email");
%>

<html>
<head>
  <title>在线留言</title>
  <jsp:include page="../common/common-css.jsp"></jsp:include>
  <jsp:include page="../common/common-js.jsp"></jsp:include>
  <style>
    a {
      text-decoration: none
    }

    a:hover {
      text-decoration: none
    }

    a:visited {
      text-decoration: none
    }

    a:default {
      text-decoration: none
    }

    .aliasName {
      position: relative;
      border-radius: 5px;
      border: none;
      padding: 10px;
      margin-top: 10px;
      margin-bottom: 20px
    }

    .aliasName:before {
      position: absolute;
      content: "";
      width: 2rem;
      height: 2rem;
      border: none;
      left: -1rem;
      top: 1rem;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      background-color: #ffffff;
    }
  </style>
</head>
<body style="background-color: #f5f5f5">
<jsp:include page="../../head.jsp"></jsp:include>
<div class="container-fluid" style="padding: 10px 0px;">
  <div class="col-xs-0 col-sm-0 col-md-0 col-lg-1"></div>
  <div class="col-xs-12 col-sm-12 col-md-8 col-lg-7" style="padding: 0px;margin: 0px;">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="text-default-color" style="padding-top: 10px">
        <h4>再次感谢您对劉員外网站的支持！</h4>
        <small>
          对于浏览网站时您所遇到的问题可以在此给我们留言，同时我们也欢迎您对本站提出意见或建议，我们将及时予以答复。
        </small>
        <p style="margin-top: 10px">
          <a href="<%=basePath%>/advice/advice?type=1" style="text-decoration: none">
            <i class="icon-edit"></i>&nbsp;写留言
          </a>
        </p>
        <hr style="width: 100%;">
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div id="advicesArea">
        <div id="loadingAdvice" class="text-center">
          <i class="icon-spinner icon-spin text-default-color"></i>&nbsp;正在加载数据......
        </div>
        <div style="margin: 100px;display: none;" id="loadingNoAdvice" class="text-center">
          <h2 style="color: #cccccc">All note will be Here</h2>
        </div>
      </div>
      <div id="advices"></div>
      <div id="loadMore" class="text-center" style="margin: 40px;display: none">加载更多</div>
      <div style="display: none;margin: 40px;" id="loadOver" class="text-center"></div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-3" style="padding: 0px 10px;margin: 0px;">
    <div style="padding: 10px" class="hidden-lg hidden-md">&nbsp;</div>
    <div style="background-color: #ffffff;padding: 10px 10px 100px;">
      <table style="width: 100%">
        <tr>
          <td style="padding: 10px 10px 10px 0px;" colspan="2">阅读最多好文</td>
        </tr>
        <tr>
          <td style="border-bottom: 1px solid limegreen;width: 50px"></td>
          <td style="border-bottom: 1px solid #f5f5f5"></td>
        </tr>
        <tr>
          <td colspan="2" style="padding: 10px 10px 10px 0px;">
            <p class="text-center storyArea" style="padding: 40px 0px;color: #666666">
              <i class="icon-spinner icon-spin"></i>&nbsp;正在加载数据......
            </p>

            <div class="story">
              <p style="color: #cccccc;display: none" class="NoStory">The latest article 10 will be here</p>
            </div>
          </td>
        </tr>
        <tr>
          <td style="padding: 10px 10px 10px 0px;" colspan="2">商品</td>
        </tr>
        <tr>
          <td style="border-bottom: 1px solid limegreen;"></td>
          <td style="border-bottom: 1px solid #f5f5f5"></td>
        </tr>
        <tr>
          <td colspan="2" style="padding: 10px 10px 10px 0px;">
            <div id="goods" style="padding: 0px">
              <p class="text-center goodsArea" style="padding: 40px 0px;color: #666666">
                <i class="icon-spinner icon-spin"></i>&nbsp;正在加载数据......
              </p>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>
<jsp:include page="../../foot.jsp"></jsp:include>
<jsp:include page="../common/common-html.jsp"></jsp:include>
</body>


<script language="JavaScript">
  function noMoreData() {
    // - 没有更多数据
    $("#loadMore").hide();
    $("#loadOver").show();
  }
  function moreData() {
    // - 还有更多数据
    $("#loadOver").hide();
    $("#loadMore").show();
  }
  // - 日期解析
  function formatDate(strTime) {
    if (strTime == null || strTime == '') {
      return "";
    }
    var date = new Date(strTime);
    return date.getFullYear() + "-" + addZero(date.getMonth() + 1) + "-" + addZero(date.getDate()) + " " + addZero(date.getHours()) + ":" + addZero(date.getMinutes()) + ":" + addZero(date.getSeconds());
  }
  function addZero(val) {
    return val < 10 ? '0' + val : val;
  }
  function reply(index, uuid, toEmail) {
    var email = '<%=email%>';
    if (!validateEmail(email)) {
      return;
    }
    var id = '#reply' + index;
    var content = $.trim($(id).val());
    if (content == '') {
      alerErr("输入留言内容");
      return;
    }
    var url = "<%=basePath%>/note/add";
    var param = {content: content, uuid: uuid, toEmail: toEmail};
    $.post(url, param, function (data, status) {
      if (data.code == 200) {
        var noteId = '#note' + index;
        $(id).val('');
        var temp = parseNote(data.data.email, data.data.logo, data.data.content, data.data.name, data.data.createTime, index);
        $(noteId).prepend(temp);
        var clazz = '.replyBox_' + index;
        $(clazz).hide();
        var ID = '#reply' + index;
        $(ID).val('');
      } else {
        aler(data);
      }
    })
  }
  function parseNote(email, logo, content, name, createTime, index) {
    if (logo != null && logo != '' && logo != undefined) {
      logo += "-120x120";
    }
    if (logo == undefined) {
      logo = '<%=basePath%>/img/user.png';
    }
    var url = "<%=basePath%>/user/queryinfo?email=" + email;
    var subItem = '';
    subItem += '<table style="width: 100%;">';
    subItem += '<tr><td>';
    subItem += '<table style="width: 100%;">';
    subItem += '<tr>';
    subItem += '<td style="padding-top: 5px;width: 30px;height: 30px" align="left" valign="top">';
    subItem += '<a href="' + url + '"><img class="img-responsive img-circle" style="width: 30px;height: 30px" src="' + logo + '" /></a>';
    subItem += '</td>';
    subItem += '<td style="padding-top: 10px;padding-bottom: 5px;padding-left: 5px;color: #999999;"valign="middle"><small>' + name + '</small></td>';
    subItem += '</tr>';
    subItem += '<tr>';
    subItem += '<td style="padding: 5px"colspan="2">';
    subItem += '<p>' + content + '</p>';
    subItem += '<table style="width: 100%">';
    subItem += '<tr>';
    subItem += '<td style="color: #999999;">';
    subItem += '<p><small>' + createTime + '</small></p>';
    subItem += '</td>';
    subItem += '<td align="right">';
    subItem += '<p><a href="javascript:replayIcon(' + index + ',\'' + email + '\',\'' + name + '\',' + true + ')"><i class="icon-comments-alt"></i></a></p>';
    subItem += '</td>';
    subItem += '</tr>';
    subItem += '</table>';
    subItem += '</td>';
    subItem += '</tr>';
    subItem += '</table>';
    subItem += '</td></tr></table>';
    subItem += '<hr style="margin: 0px">';
    return subItem;
  }
  var pageNo = 1;
  function parseContent(url, logo, alias, createtime, content, index, uuid, notes, email) {
    // - 组装说说
    var item = '';
    item += '<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"style="margin: 0px;padding: 0px;">';
    item += '<table style="width: 100%;">';
    item += '<tr>';
    item += '<td style="width: 45px;height: 45px;padding-top: 10px"valign="top">';
    item += '<a href="' + url + '">';
    item += '<img style="width: 40px;height: 40px" class="img-responsive img-circle" src="' + logo + '">';
    item += '</a>';
    item += '</td>';
    item += '<td style="padding: 0px 0px 0px 20px;color: darkgrey;">';
    item += '<p style="background-color: #ffffff;padding: 10px;"class="aliasName">'
    item += '<table style="width: 100%">';
    item += '<tr><td style="padding: 5px">' + alias + '</td></tr>';
    item += '<tr><td style="padding: 10px 5px">' + content + '</td></tr>';
    item += '<tr>';
    item += '<td>';
    item += '<table>';
    item += '<tr>';
    item += '<td align="left" style="padding: 5px;color: #999999;background-color: #ffffff"><small>' + formatDate(createtime) + '</small></td>';
    item += '<td align="right" style="padding: 5px;"><a href="javascript:replayIcon(' + index + ',\'' + alias + '\',\'' + alias + '\',' + false + ')"><i class="icon-comments">&nbsp;回复</i></a></td>';
    item += '</tr>';
    item += '</table>';
    item += '<table style="width: 100%;padding:5px 20px;display:none;margin:10px 0px;"class="replyBox_' + index + '">';
    item += '<tr>';
    item += '<td style="padding: 5px">';
    item += '<table style="width: 100%">';
    item += '<tr>';
    item += '<td style="width: 100%">';
    item += '<input id="reply' + index + '" type="text"  maxlength="512" style="width: 100%;padding: 5px;border-left: 5px solid #ffffff;border: none;" placeholder="输入内容"/>';
    item += '</td>';
    item += "<td style='padding: 0px 5px'><a  style='padding: 4px' class='btn btn-default-color' href='javascript:reply(" + index + ",\"" + uuid + "\",\"" + email + "\")'>&nbsp;回&nbsp;复&nbsp;</a></td>";
    item += '</tr>';
    item += '</table>';
    item += '</td>';
    item += '</tr>';
    item += '</table>';
    item += '<hr style="margin: 5px 0px">';
    if (notes != undefined && notes.length > 0) {
      item += '<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 "style="padding: 0px 10px;" id="note' + index + '">';
      for (var j = 0; j < notes.length; j++) {
        var note = notes[j];
        item += parseNote(note.email, note.logo, note.content, note.name, note.createTime, index);
      }
      item += '</div>';
    } else {
      item += '<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"style="padding-top: 15px" id="note' + index + '"></div>';
    }
    item += '</p>';
    item += '</td>';
    item += '</tr>';
    item += '</table>';
    item == '</div>';
    return item;
  }
  function replayIcon(index, email, name, flag) {
    var clazz = '.replyBox_' + index;
    $(clazz).show();
    var ID = '#reply' + index;
    $(ID).focus();
    if (!flag) {
      $(ID).val('');
      return;
    }
    var alias = name;
    if (name == '' || name == null || name == undefined) {
      alias = email;
    }
    $(ID).val('@' + alias + ' ');
  }
  function loadAdvice(pageNo, pageSize, type, status) {
    var index_init = (pageNo - 1) * pageSize;
    var index = 0;
    var url = "<%=basePath%>/advice/list";
    var param = {pageNo: pageNo, pageSize: pageSize, type: type, status: status};
    $.post(url, param, function (data, status) {
      var advices = data;
      var item;
      var alias;
      var logo = '<%=basePath%>/img/user.png';
      if (advices.length == 0) {
        if (pageNo == 1) {
          // - 没有数据
          $("#loadingAdvice").hide();
          $("#loadingNoAdvice").show();
        } else {
          // - 没有更多数据
          $("#loadMore").hide();
          $("#loadOver").show();
        }
      } else {
        $("#advicesArea").hide();
        for (var i = 0; i < advices.length; i++) {
          index = index_init + i;
          logo = '<%=basePath%>/img/user.png';
          var msgType = advices[i].msgType;
          alias = advices[i].name;
          var dealName = advices[i].dealName;
          var dealTime = advices[i].dealTime;
          var dealPhone = advices[i].dealPhone;
          if (advices[i].name == 'Your Name') {
            alias = advices[i].email;
          }
          if (advices[i].logo != null && advices[i].logo != '' && advices[i].logo != undefined) {
            logo = advices[i].logo + "-120x120";
          }
          var url = "<%=basePath%>/user/queryinfo?email=" + advices[i].email;
          item = "";
          item += parseContent(url, logo, alias, advices[i].createtime, advices[i].content, index, advices[i].uuid, advices[i].notes, advices[i].email);
          $("#advices").append(item);
        }
        if (advices.length == pageSize) {
          moreData();
        } else {
          noMoreData();
        }
      }
    })
  }

  function loadStory(pageNo, pageSize) {
    var url = "<%=basePath%>/story/list";
    var param = {pageNo: pageNo, pageSize: pageSize, orderField: "read_count", storyType: 0};
    var item = '';
    var logo = '';
    $.post(url, param, function (data, status) {
      var stories = data;
      $(".storyArea").remove();
      if (stories.length > 0) {
        $(".story").empty();
        for (var i = 0; i < stories.length; i++) {
          logo = '';
          if (stories[i].imgUrl == null || stories[i].imgUrl == '' || stories[i].imgUrl == undefined || stories[i].imgUrl == '<%=basePath%>/img/product.png') {
            logo = '<%=basePath%>/img/product.png';
          } else {
            logo = stories[i].imgUrl + '-360x200';
          }
          item = '';
          item += '<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12"style="padding: 0px">';
          item += '<a style="text-decoration: none;" href="<%=basePath%>/story/info?uuid=' + stories[i].uuid + '">';
          item += '<div class=" col-xs-4 col-sm-4 col-md-4 col-lg-3 text-center"style="padding: 0px ;">';
          item += '<img class="img-responsive" src="' + logo + '" alt="' + stories[i].name + '">';
          item += '</div>';
          item += '<div class=" col-xs-8 col-sm-8 col-md-8 col-lg-9">';
          item += '<p style="font-weight: bold;">' + stories[i].title + '</p>';
          item += '<p style="color: #999999;">' + stories[i].subTitle + '</p>';
          item += '<table style="width: 100%">';
          item += '<tr>';
          item += '<td><p><span class="badge" style="background-color: #CC66CC">' + stories[i].tag + '</span></p></td>';
          item += '<td align="right"><p style="color: #999999;" class="text-right"><small>阅读：' + stories[i].readCount + '</small></p></td>';
          item += '</tr>';
          item += '</table>';
          item += '</div>';
          item += '</a>';
          item += '</div>';
          item += '<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12"style="padding: 0px"><hr></div>';
          $(".story").append(item);
        }
      } else {
        $(".NoStory").show();
      }
    })
  }

  function buildGood(goodExt) {
    var type = goodExt.type;
    var typeDesc = goodExt.remark;
    var list = goodExt.list;
    var item = '';
    var temp = '';
    for (var i = 0; i < list.length; i++) {
      var goodUrl = '';
      var url = list[i].url;
      var id = list[i].id;
      var name = list[i].name;
      var deleted = list[i].deleted;
      var sales = list[i].sales;
      var price = list[i].price;
      var unit = list[i].unit;
      if (url == null || url == '' || url == undefined || url == '<%=basePath%>/img/product.png') {
        goodUrl = '<%=basePath%>/img/product.png';
      } else {
        goodUrl = url + '-360x200';
      }
      item += '<a style="text-decoration: none" href="javascript:toProduct(' + id + ');">';
      item += '<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12"style="padding: 0px">';
      item += '<div class=" col-xs-4 col-sm-4 col-md-4 col-lg-3 text-center"style="margin: 5px 0px;padding: 0px ">';
      item += '<img class="img-responsive" src="' + goodUrl + '" alt="' + name + '">';
      item += '</div>';
      item += '<div class=" col-xs-8 col-sm-8 col-md-8 col-lg-9">';
      item += '<p style="padding: 5px 0px;font-weight: bold;color: #444444">' + name + '</p>';
      item += '<table style="width: 100%">';
      item += '<tr>';
      item += '<td style="color: red">';
      item += '￥' + price + '/' + unit;
      item += '</td>';
      item += '<td align="right">';
      if (deleted == 1) {
        item += '<p style="color: #999999">已下架</p>';
      }
      item += '<small style="color: #999999">销量：' + sales + '</small>';
      item += '</td>';
      item += '</tr>';
      item += '</table>';
      item += '</div>';
      item += '</div>';
      item += '</a>';
      item += '<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12"style="padding: 0px">';
      item += '<hr style="margin: 5px">';
      item += '</div>';
      temp += item;
      item = '';
    }
    return temp;
  }

  // - 加载商品列表
  function loadGoods(pageNo, pageSize) {
    var url = "<%=basePath%>/product/list";
    var email = '<%=email%>'
    var param = {pageNo: pageNo, pageSize: pageSize, email: email};
    $.post(url, param, function (data, status) {
      var goods = data;
      $(".goodsArea").remove();
      if (goods.length > 0) {
        for (var i = 0; i < goods.length; i++) {
          $("#goods").append(buildGood(goods[i]));
        }
        if (goods.length == pageSize) {
          // - 还有更多数据
          $("#loadOver").hide();
          $("#loadMore").show();
        } else {
          // - 没有更多数据
          $("#loadMore").hide();
          $("#loadOver").show();
        }
      } else {
        // - 没有数据
        var noDataShow = '';
        noDataShow += '<p style="color: #cccccc;">The latest goods 10 will be here</p>';
        $("#goods").empty();
        $("#goods").append(noDataShow);
      }
    })
  }

  function toProduct(productId) {
    var url = '<%=basePath%>/order/preadd?productId=' + productId;
    window.location.href = url;
  }

  $(function () {
    initStyle();
    loadAdvice(pageNo++, 10, 1, null);
    loadStory(0, 10);
    loadGoods(0, 10);
    $("#loadMore").click(function () {
      loadAdvice(pageNo++, 10, 1, null);
    })
  })
</script>
</html>
